<template>
    <div class="formItemWrap">
        <a-form-item :label="item.label" v-if="['input',].includes(item.type)">
            <a-input v-decorator="[item.dataIndex, { rules: [{ required: item.required, message: getMessage(item) }] }]"
                v-if="item.type == 'input'" :disabled="item.disabled" :placeholder="getMessage(item)" />
        </a-form-item>
        <FormTree v-else-if="item.type == 'tree'" :item="item" :formVal="formVal" :formData="formData" :form="form">
        </FormTree>
        <FormSelectQuest v-else-if="['select'].includes(item.type) && item.object" :item="item" :formVal="formVal"
            :form="form" :formData="formData"></FormSelectQuest>
        <FormSelect v-else-if="['select', 'selectx'].includes(item.type)" :item="item" :formVal="formVal" :form="form"
            :formData="formData"></FormSelect>
        <a-form-item :label="item.label" v-else-if="['treeSelect',].includes(item.type)">
            <a-tree-select
                v-decorator="[item.dataIndex, { rules: [{ required: item.required, message: getMessage(item) }] }]"
                :disabled="item.disabled" :treeData="item.data" :placeholder="getMessage(item)"></a-tree-select>
        </a-form-item>
        <a-form-item :label="item.label" v-else-if="['number',].includes(item.type)">
            <a-input-number style="width: 100%;"
                v-decorator="[item.dataIndex, { rules: [{ required: item.required, message: getMessage(item) }] }]"
                :min="0" :precision="0"></a-input-number>
        </a-form-item>
        <FormTime v-else-if="['date',].includes(item.type)" :item="item" :formVal="formVal" :form="form"
            :formData="formData"></FormTime>
        <FormSelectTree v-else-if="['selectTree',].includes(item.type)" :item="item" :formVal="formVal" :form="form"
            :formData="formData"></FormSelectTree>
        <FormSelectUrl v-else-if="['selectUrl',].includes(item.type)" :item="item" :formVal="formVal" :form="form"
            :formData="formData"></FormSelectUrl>
    </div>
</template>
<script>
import FormTree from './components/FormTree';
import FormSelect from './components/FormSelect';
import FormSelectQuest from './components/FormSelectQuest';
import FormTime from './components/FormTime';
import FormSelectTree from './components/FormSelectTree.vue';
import FormSelectUrl from './components/FormSelectUrl.vue';
import { getMessage } from './components/js/js';

export default {
    name: 'FormItem',
    components: {
        FormTree,
        FormSelect,
        FormSelectQuest,
        FormTime,
        FormSelectTree,
        FormSelectUrl,
    },
    props: {
        item: {
            type: Object,
            default: () => { }
        },
        formVal: {
            type: Object,
            default: () => { }
        },
        formData: {
            type: [Array, Object],
            default: () => []
        },
        form: {
            type: [Array, Object, String],
        }
    },
    data() {
        return {
            replaceFields: { children: 'child', title: 'name', key: 'id' },
        }
    },
    mounted() {
    },
    methods: {
        getMessage,
    }
}
</script>

<style lang="less" scoped>
.formItemWrap {
    width: 100%;
}
</style>